<template>
	<view class="w-1" style="display: flex;padding-top: 146rpx;">
		<view class="tabs">
			<view :class="curTab==item.id?'active':'tab'" v-for="(item,index) in tabs2" :key="index"
				@click="choose(item)" style="position: relative;">
				{{item.name}}
				<u-badge :isDot="item.has" absolute :offset="[10,10]"></u-badge>
			</view>
		</view>
		<scroll-view scroll-y="true" v-if="list.length>0" @scrolltolower="scrolltolower">
			<view style="height:calc(100vh - 260rpx);padding: 20rpx;background-color: rgba(248, 252, 255, 1);">
				<view class="br-20 m-b-30 relative" @click="$to('/pagemaster/pages/Order/Detail?sn='+item.ordersn)"
					v-for="(item,index) in list" :key="index" style="flex:1;background-color: #f1f5f6;">
					<view class="rlabel absolute rbg2" style="right: 0; top: 0;">待接单</view>
					<view class="w-1 p-30 fl-s-s" style="padding-bottom: 25rpx;">
						<view class="w-1 fr-b-c">
							<text class="c-33 fs-28 bold">{{item.title}}</text>
							<!-- <text class="c-price fs-28">{{obj[item.state]}}</text> -->
						</view>
						<text class="flex-1 c-77 m-t-10 fs-24  text-line-2">规格名称：{{item.skuons || '默认'}}</text>
						<view class="fr-s-c m-t-20">
							<text class=" c-77 fs-24">期望上门时间：</text>
							<text class=" c-33 bold fs-24">{{item.reservtime}}</text>
						</view>
						<view class="fr-s-c m-t-20">
							<text class=" c-77 fs-24">服务地址：</text>
							<text
								class=" c-33 bold fs-24">{{item.residevice+item.residecity+item.residedist+item.address}}</text>
						</view>
						<view class="m-t-30 w-1 bb-solid"></view>
						<view class="w-1 fr-b-c m-t-25 warp">
							<text class="fs-28" style="color: #7197FF;">距{{(item.dis/ 1000) .toFixed(2) }}km</text>
							<view class="btn1 fr-c m-l-20" @click.stop="sureorder(item)">确认接单</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>



		<view class=" p-t-150" v-if="nodata"
			style="flex:1;background-color: rgba(248, 252, 255, 1);height:calc(100vh - 260rpx);">
			<up-empty :icon="$icon"></up-empty>
		</view>
	</view>
</template>

<script setup>
	// 0=待付款,1=已支付,2=已完成,3=取消支付,4=已发货,5=待评价,10=已接单,11=进行中,12=报价缴费中,13=完成待确认',
	const tabs = ref([{
			name: '全部',
			val: -1
		},
		{
			name: '已接单',
			val: 10
		},
		{
			name: '服务中',
			val: 11
		}, {
			name: '待客户确认',
			val: 13
		},
		{
			name: '已完成',
			val: 2
		}
	]);
	const activeStyle = {
		'font-weight': 800,
		'font-size': '32rpx',
		color: '#01796D'
	}
	const inactiveStyle = {
		'font-weight': 400,
		'font-size': '30rpx',
		color: '#333333'
	}


	const curtab = ref(0)

	function clickTab(e) {
		curtab.value = e.index;
		// reget(true)
	}
	const selectedCity = ref("")
	const selectedProvince = ref("")
	const location = ref('')
	onLoad(async () => {
		if (uni.getStorageSync("city")) {
			selectedCity.value = uni.getStorageSync("city");
			selectedProvince.value = uni.getStorageSync("selectedProvince");
		} else {
			selectedCity.value = {

			}
			selectedProvince.value = {

			}
		}
	})
	const curTab = ref(null)
	const tabs2 = ref([])
	onShow(() => {
		getuser()
	})
	const user = ref({})
	const getuser = () => {
		uni.$post({
			url: '/api/User/Userinfo',
			loading: false
		}).then(res => {
			for (let i in res.data) {
				if (res.data[i] == null) {
					res.data[i] = ''
				}
			}
			user.value = res.data;
		})
	}

	function getTabs() {
		uni.$get({
			url: '/api/goods/shortcutcatelst',
		}).then(res => {
			console.log('res------------------------------------', res)
			tabs2.value = res.data;
			curTab.value = tabs2.value[0].id;
			getlist()
			getlist2()
		})
	}

	function choose(item) {
		if (curTab.value == item.id) {
			return
		}
		page.value = 1;
		curTab.value = item.id;
		getlist()
	}
	onMounted(async () => {
		const res = await getApp().getlocation(true)
		console.log(res)
		getTabs()
		uni.$on('retab', () => reget(false))
	})

	onUnload(() => {

		uni.$off('retab')
	})

	const page = ref(1);
	const list = ref([])
	const nodata = ref(false);
	const loadmore = ref(true);

	function setValue(v1, v2) {
		selectedCity.value.name = v1;
		selectedProvince.value.name = v2;
		getlist();
		getlist2();
	}

	function getlist() {
		let location = uni.getStorageSync('location');
		let para = {
			type: 1,
			page: page.value,
			category_id: curTab.value,
			...location,
			city: selectedCity.value.name || undefined
		}
		if (!selectedCity.value.name) {
			delete para.city
		}
		uni.$get({
			url: '/api/Ordersystem/Takingorders',
			data: para
		}).then(res => {
			if (page.value == 1) list.value = [];
			list.value = [...list.value, ...res.data];
			nodata.value = !list.value.length;
			loadmore.value = res.data.length;
		}).catch(err => {
			list.value = [];
			nodata.value = !list.value.length;
			loadmore.value = true;
		})
	}

	function getlist2() {
		console.log('selectedCity.value.name', selectedCity.value.name)
		let location = uni.getStorageSync('location');
		let para = {
			type: 1,
			page: page.value,
			...location,
			city: selectedCity.value.name || undefined
		}
		if (!selectedCity.value.name) {
			delete para.city
		}
		uni.$get({
			url: '/api/Ordersystem/Takingorders',
			data: para
		}).then(res => {
			let ids = res.data.map(item => {
				return item.category_id
			})
			tabs2.value.forEach(item => {
				if (ids.includes(item.id)) {
					item['has'] = true
				} else {
					item['has'] = false
				}
			})
			console.log(11111111111111111)
			console.log(tabs2.value)
		}).catch(err => {

		})
	}

	function reget(loading = false) {
		page.value = 1;
		getlist(loading)
		getlist2()
	}
	onPullDownRefresh(() => {
		reget()
	})
	// onReachBottom(() => {

	// })


	function scrolltolower() {
		if (loadmore.value) {
			page.value++;
			getlist()
		}
	}

	function sureorder(item) {
		let that = this;
		if (user.value.starf_status == 0) {
			uni.showModal({
				title: '提示',
				content: '请先认证',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: "/pagemaster/pages/User/UserInfo"
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});

			return
		}
		if (user.value.starf_status > 2) {
			uni.showModal({
				title: '提示',
				content: '认证不通过',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: "/pagemaster/pages/User/UserInfo"
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});

			return
		}
		if (user.value.starf_status == 2) {
			uni.showToast({
				icon: "none",
				title: "请先等待认证审核"
			})
			return
		}
		uni.$post({
			url: '/api/Ordersystem/tocourieronorder',
			data: {
				aid: item.id,
				type: 1,
			}
		}).then(res => {


			uni.$emit('retab')
			getApp().tt('接单成功', 'success')

			// uni.$delayBack()
			reget(false);
			todetail(res.data)

		})
	}

	function todetail(ordersn) {
		uni.navigateTo({
			url: '/pagemaster/pages/Order/Detail?sn=' + ordersn
		})
	}
	defineExpose({
		setValue
	});
</script>

<style>
	page {
		background: #f4f6f8;
	}

	.btn1 {
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 60rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #01796d;
		font-size: 28rpx;
	}

	.btn2 {
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 60rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #ff6251;
		font-size: 28rpx;
	}

	.btn3 {
		min-width: 170rpx;
		padding: 0 15rpx;
		text-align: center;
		color: #505050;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #E5E5E5;
		font-size: 28rpx;
	}

	.btn4 {
		font-size: 28rpx;
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 64rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #fe9203;
		font-weight: bold;
	}


	.rlabel {
		min-width: 96rpx;
		padding: 0 15rpx;
		height: 44rpx;
		border-radius: 0 20rpx 0 20rpx;
		line-height: 44rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.rbg1 {
		background: #319a42;
	}

	.rbg2 {
		background: #ffbb00;
	}

	.rbg3 {
		background: #ff5c55;
	}

	.rbg4 {
		background: #99d0c7;
	}

	.rbg5 {
		background: #cfcfcf;
	}
</style>
<style scoped lang="scss">
	.tabs {
		background-color: rgb(244, 246, 248);
		z-index: 999;
		overflow: auto;
		display: flex;
		flex-direction: column;
		// width: 200rpx;
		min-width: 220rpx;
		width: 220rpx;
		height: calc(100vh - 276rpx);

		.tab {
			min-width: 100%;
			text-align: center;
			font-size: 28rpx;
			padding: 26rpx 0;
			width: 100%;
			text-align: center;
		}

		.active {
			background-color: #01796d;
			color: white;
			text-align: center;
			width: 100%;
			min-width: 100%;
			font-size: 28rpx;
			padding: 26rpx 0;
			text-align: center;
		}
	}
</style>